<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科研统计</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container mt-4">
    <h1>科研统计</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="teacherSelect">选择教师:</label>
                <select id="teacherSelect" class="form-control">
                    <option value="">-- 所有教师 --</option>
                    <option th:each="teacher : ${teachers}"
                            th:value="${teacher.teacherId}"
                            th:text="${teacher.name}"></option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="typeSelect">选择科研类型:</label>
                <select id="typeSelect" class="form-control">
                    <option value="">-- 所有类型 --</option>
                    <option th:each="type : ${types}"
                            th:value="${type.typeId}"
                            th:text="${type.typeName}"></option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <button id="queryBtn" class="btn btn-primary mt-4">查询</button>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">统计结果</div>
                <div class="card-body">
                    <div id="resultContainer"></div>
                    <canvas id="statsChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('queryBtn').addEventListener('click', function() {
    const teacherId = document.getElementById('teacherSelect').value;
    const typeId = document.getElementById('typeSelect').value;

    if (teacherId && typeId) {
        fetch(`/researches/stats/data?teacherId=${teacherId}&typeId=${typeId}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('resultContainer').innerHTML = `
                    <h4>数量: ${data}</h4>
                `;
            });
    } else {
        alert('请选择教师和科研类型');
    }
});
</script>
</body>
</html>